<!-- <p>todos case01!</p> -->
<!-- 
    Todos案例的功能描述:
    ·1.任务展示
    ·2.任务删除
    ·3.任务删除
    ·4.任务完成后状态切换
 -->
<!-- 将数据渲染到页面中,使用class类父元素 -->
<header>
    <!-- 双向数据绑定拿到输入框中的数据 -->
    <input type="text" [(ngModel)]="todoName"> &nbsp;
    <button (click)="addTodo()">添加</button>
</header>
<div class="todos">
    <!-- 遍历数组 <*ngFor> -->
    <ul>
        <li *ngFor="let todo of todos; trackBy:trackByTodo">
            <span (click)="changeTodo(todo.id)" [class.done]="todo.done">{{todo.tname}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <!-- $event用来阻止默认事件-->
            <a href="#" (click)="delTodo($event,todo.id)">x</a>
        </li>
    </ul>

</div>